jQuery 基础

Posted on

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events

jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象

jQuery是通过$符号进行调用，同样的支持jQuery,

1
2
3
4
5
6
<p>ppp</p>
	<script src="jquery-3.2.1.js"></script>
	<script>
		$("p").css("color","red");
		var $ele=$("p");//这是jQuery对象
		//var $ele=jQuery("p");//和上面的效果是一样的

jQuery对象转换成DOM对象

$variable[0]：jquery对象转为dom对象

1
2
3
4
5
6
<p>ppp</p>
	<script src="jquery-3.2.1.js"></script>
	<script>
		$("p").css("color","red");
		var $ele=$("p")[0].innerText;//把jQuery对象转换成DOM对象 
		console.log($ele);

jquery的基础语法：$(selector).action()

寻找元素(选择器和筛选器)

选择器

小技巧： 删除ul li 的默认 有list-syle:none；
快速建ul li ul>li*4 就是快速建立4个

  • 基本选择器
1
2
3
4
5
6
7
8
9
10
11
12
<p>p</p>
<p>pp</p>
<p id="p2">ppp</p>
<p class="p3">pppp</p>
	<script src="jquery-3.2.1.js"></script>
	<script>
		// $("*").css("color","red");//全部的
		// $("#p2").css("color","red");//找ID
		// $(".p3").css("color","red");//找class
		$(".p3,#p2").css("color","red");//找class ID多个用逗号分开
	</script>
  • 层级选择器
1
2
3
4
5
$(".outer p").css("color","red");//div内全部的
$(".outer>p").css("color","red");//子代
$(".outer+p").css("color","red");//毗邻
$(".outer~p").css("color","red");//兄弟
$(".p1~div").css("color","red");//兄弟

  • 基本筛选器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
    	// $("li:first").css("color","red");//第一个
    	// $("li:last").css("color","red");//最后一个
    	// $("li:eq(2)").css("color","red");//索引是第二个
    	// $("li:gt(2)").css("color","red");//大于
    	$("li:lt(2)").css("color","red");//小于
           // $("li:even").css("color","red");//偶数
    	$("li:odd").css("color","red");//奇数
    </script>

  • 属性选择器

1
2
3
4
5
6
<div aa="sb">aaa</div>
<div aa="sbb">aabbba</div>
<script>
		$("[aa]").css("color","red");//这种是自定义的属性
		$("[aa=sb]").css("color","red");//这样就能找到唯一的一个
	</script>
  • 表单选择器
1
2
3
4
5
6
<input type="text">
<input type="pwd">
<script>
		// $("[type=text]").css("border","2px solid red");
		$(":text").css("border","2px solid red");//这个仅仅适用于input
	</script>

实 例 1：左侧菜单

过滤 筛选器

1
2
//$("ul li:eq(2)").css("color","red");//

查找筛选器

1
2
// $("ul li").eq(2).css("color","red");//推荐用这个
        var $ret=$("ul li").eq(2).hasClass("item");//有返回值是true 没有返回值是false

筛选器

孩子组

1
2
3
4
5
6
7
8
9
10
11
<div class="div1">
	<div class="div2">
		<p id="p1">222</p>
	</div>
	<p id="p2">ppp</p>
	<a href="">111</a>
</div>
    <script>
		$(".div1").children("p").css("color","red");//找子代
		$(".div1").find("p").css("color","red");//找后代 儿子 孙子
	</script>

兄弟

sibilings是js中没有的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
		<li class="item active">111</li>
		<li class="item">222</li>
		<li class="item">333</li>
		<li class="item items">444</li>
		<li class="item ">555</li>
		<li class="item">666</li>
		<li class="item ">777</li>
	</ul>
<script>
$(".active").next().css("color","red");//找下一个
		$(".active").nextAll().css("color","red");//找下面的全部
		$(".active").nextUntil(".items").css("color","red");//区间 但是找不到itmes的哪一个
		//自己出错的点是.items没有加上点
		$(".items").siblings().css("color","red");//除了这个之外的所有的兄弟
</script>

jQuery支持链式操作

这里的关键是最后操作的结果是self().next这一级别，下面还有next的话，就是下一级

1
2
3
function show(self){
$(self).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
         }

属性操作

  • arrt

适合操作自定义属性，内部定义的是undefined

  • prop

选择框 选上的是时候是true,否则是false

1
2
3
4
5
6
$(":checkbox")
[input, prevObject: jQuery.fn.init(1)]
$(":checkbox").prop("checked")
true
$(":checkbox").prop("checked")
false

  • addClass
  • removeClass
  • .html 获得html代码 对应innerHtml
  • .text 获取文本 对应innerText
  • .val 获得value的值，有value的是input button

属性操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>pp</p>
	<div>
		<a href="">click</a>
	</div>
	<div class="div2">div2</div>
	<input type="button" value="button">
	<input type="text" value="11111">
	<input type="checkbox" value="22222">
	<script src="jquery-3.2.1.js"></script>
	<script>
		console.log($("div").html());//找到div 中的html
		console.log($("div").text());//找到div  z中的文本
		$(".div2").text("<h1>hello</h1>");//添加的是纯文本
		$(".div2").html("<h1>hello</h1>");//添加的是html
		console.log($(":text").val());//打印的是text中的value
		console.log($(":checkbox").val());//打印的是checkbox中的value
		console.log($(":button").val());//打印的是button中的value
	</script>
</body>
</html>

实例

jQuery实现table案例实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button>全选</button>
	<button>反选</button>
	<button>取消</button>
	<hr>
	<table border="2px">
		<tr>
			<td><input type="checkbox" class="item"></td>
			<td>111</td>
			<td>111</td>
			<td>111</td>
		</tr>
			<tr>
			<td><input type="checkbox" class="item"></td>
			<td>111</td>
			<td>111</td>
			<td>111</td>
		</tr>
			<tr>
			<td><input type="checkbox" class="item"></td>
			<td>111</td>
			<td>111</td>
			<td>111</td>
		</tr>
	</table>
	<script src="jquery-3.2.1.js"></script>
	<script>
	var eles=document.getElementsByTagName("button");//找到按钮
	var inps=document.getElementsByClassName("item");//找到选择框
	console.log(eles);
	console.log(inps);
	// 第一个循环
	for (var i=0;i<eles.length;i++) {
		eles[i].onclick=function(){
			//this拿到的是这个按钮标签
			if(this.innerText=="全选"){
				//第二个循环是遍历CheckBox的框
				//1 js方式
				// for(var j=0;j<inps.length;j++){
				// 	inps[j].checked=true;//循环设置勾选
				// }
				
				//2 jQuery的方法
				$(":checkbox").prop("checked",true);
			}
			else if (this.innerText=="取消") {
				$(":checkbox").prop("checked",false);
			} 
			//反选情况
			else{
				//jQuery的循环是each 自己出错在checkbox前面没有冒号
				$(":checkbox").each(function(){
					//这个是设置属性的方式，后面的直接取反
					$(this).prop("checked",!$(this).prop("checked"));//
				
					//js的方式
					// if($(this).prop("checked")){
					// 	$(this).prop("checked",false);
					// }
					// else{
					// 	$(this).prop("checked",true);
					// }
				})
				
				
			}
		}
	}
	</script>
</body>
</html>

jQuery TAB切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding: 0;//ul li有默认的padding
		}
		.outer{
			width: 80%;
			margin: 10px auto;
		}
		.nav li{
			list-style: none;
			float: left;
			width: 33.1%;
			background-color: wheat;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-right: 1px solid gray;
		}
		.content{
			width: 100%;
			height: 400px;
			background-color: gray;
			float: left;
			/*clear: left;*/
			/*clear: both;*/
		}
		ul .active{
			background-color: darkblue;
		}
		.hide{
			display: none;
		}
	</style>
</head>
<body>
	<div class="outer">
		<ul class="nav">
			<!-- 通过自定义属性与content的内容建立关联  -->
			<li f="con1" class="active">菜单一</li>
			<li f="con2">菜单二</li>
			<li f="con3">菜单三</li>
		</ul>
		<div class="content">
			<div class="con1">111</div>
			<div class="con2 hide">222</div>
			<div class="con3 hide">333</div>
		</div>
	</div>
	<script src="jquery-3.2.1.js"></script>
	<script>
		var outer = document.getElementsByClassName("outer")[0];
		var lis = document.getElementsByTagName("li")
		//找到每一个tab按钮
		for (var i = 0; i < lis.length; i++) {
			lis[i].onclick=function(){
				// console.log(this);
				$(this).addClass("active").siblings().removeClass("active");//这个是自己添加背景，兄弟标签删除背景
				var $name=$(this).attr("f");//$name是通过自定义属性获得
				console.log($name);//通过自定义的属性获得con1 con2 con3
				//通过上面的$name直接操作content中的css,但是不能直接用.class的形式--“.$name” 只能通过字符串拼接的方式
				$("."+$name).removeClass("hide").siblings().addClass("hide")
			}
		}
	</script>
	
</body>
</html>

jQuery 动画效果–显示隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>ppp</p>
	<button id="show">显示</button>
	<button id="hide">隐藏</button>
	<button id="toggle">toggle</button>
	<script src="jquery-3.2.1.js"></script>
	<script>
		//jQuery 绑定事件 标签对象.事件(function{})
		$("#show").click(function(){
			$("p").show(1000);
			// $("p").show(1000,function(){
			// 	alert(123);//回调函数，完成一个动作后自动触发的函数
			// })
		})
		$("#hide").click(function(){
			$("p").hide(1000);
		})
		$("#toggle").click(function(){
			$("p").toggle(1000);
		})
	</script>
</body>
</html>

jQuery淡入淡出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.con{
			width: 200px;
			height: 200px;
			background-color: green;
		}
	</style>
</head>
<body>
	
	<div class="con">淡入淡出</div>
	<!-- //淡入淡出的本质还是隐藏 操作的是透明度-->
	<button id="fadeIn">淡入</button>
	<button id="fadeOut">淡出</button>
	<button id="fadeToggle">toggle</button>
	<button id="fadeTo">fadeTo</button>
	<script src="jquery-3.2.1.js"></script>
	<script>
		//jQuery 绑定事件 标签对象.事件(function{})
		$("#fadeIn").click(function(){
			$(".con").fadeIn(2000);
			
		})
		$("#fadeOut").click(function(){
			$(".con").fadeOut(2000);
		})
		$("#fadeToggle").click(function(){
			$(".con").fadeToggle(1000);
		})
		$("#fadeTo").click(function(){
			$(".con").fadeTo(1000,0.4);
		})
		// 淡入淡出：隐藏与显示有了一个透明度渐变的效果  应用：替换 removeClass("hide")  addClass(hide)
	</script>
</body>
</html>

jQuery滑动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#con{
			line-height: 80px;
			background-color: green;
			color: white;
			text-align: center;
		}
	</style>
</head>
<body>
	<p>hello</p>
	<button id="slideDown">显示</button>
	<button id="slideUp">隐藏</button>
	<button id="slidetoggle">toggle</button>
	<div id="con">滑动</div>
	<script src="jquery-3.2.1.js"></script>
	<script>
			
			$("#slideDown").click(function(){
				$("#con").slideDown();
			})
			$("#slideUp").click(function(){
				$("#con").slideUp();
			})
			$("#slidetoggle").click(function(){
				$("#con").slideToggle();
			})										
	</script>
</body>
</html>

jQuery clone

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div class="box">
	<div class="item">
		<input type="button" value="+">
		<input type="text">
	</div>
	
</div>
	<script src="jquery-3.2.1.js"></script>
	<script>
	
		// $(":button").click(function(){
		$("[value='+']").click(function(){
			// $(".box .item").clone();//这种情况会导致添加多个 2 4 8 
			var $clone=$(this).parent().clone();//按照点击的找
			$clone.children(":button").val("-").attr("onclick","removeA(this)");//val(内部的值是赋值)
			$(".box").append($clone); 
			
			 // var $clone=$(this).parent().clone();
    //     $clone.children(":button").val("-").attr("onclick","removeA(this)");
    //     $(".box").append($clone)
		});
		//名字不能是rmove
		//错误是没有加self
		function removeA(self){
			console.log($(self).parent());
			$(self).parent().remove();
		}
		// function removeA(self){
		// 	console.log($(self).parent());
		// 	$(self).parent().remove()
		// }
    
	</script>
	
</body>
</html>

jQuery隐藏 显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>hello</p>
	<button id="show">显示</button>
	<button id="hide">隐藏</button>
	<button id="toggle">toggle</button>
	<script src="jquery-3.2.1.js"></script>
	<script>
			//标签对象.事件(function{})
			$("#show").click(function(){
				$("p").show(1000,function(){
					alert(123);//回调函数，完成一个动作后自动触发的函数
				})
			})
			$("#hide").click(function(){
				$("p").hide(1000)
			})
			$("#toggle").click(function(){
				$("p").toggle(1000)
			})
									
	</script>
</body>
</html>

jQuery 淡入淡出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.con{
			width: 200px;
			height: 200px;
			background-color: green;
		}
	</style>
</head>
<body>
	
	<div class="con">淡入淡出</div>
	<!-- //淡入淡出的本质还是隐藏 操作的是透明度-->
	<button id="fadeIn">淡入</button>
	<button id="fadeOut">淡出</button>
	<button id="fadeToggle">toggle</button>
	<button id="fadeTo">fadeTo</button>
	<script src="jquery-3.2.1.js"></script>
	<script>
		//jQuery 绑定事件 标签对象.事件(function{})
		$("#fadeIn").click(function(){
			$(".con").fadeIn(2000);
			
		})
		$("#fadeOut").click(function(){
			$(".con").fadeOut(2000);
		})
		$("#fadeToggle").click(function(){
			$(".con").fadeToggle(1000);
		})
		$("#fadeTo").click(function(){
			$(".con").fadeTo(1000,0.4);
		})
		// 淡入淡出：隐藏与显示有了一个透明度渐变的效果  应用：替换 removeClass("hide")  addClass(hide)
	</script>
</body>
</html>

jQuery滑动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#con{
			line-height: 80px;
			background-color: green;
			color: white;
			text-align: center;
		}
	</style>
</head>
<body>
	<p>hello</p>
	<button id="slideDown">显示</button>
	<button id="slideUp">隐藏</button>
	<button id="slidetoggle">toggle</button>
	<div id="con">滑动</div>
	<script src="jquery-3.2.1.js"></script>
	<script>
			
			$("#slideDown").click(function(){
				$("#con").slideDown();
			})
			$("#slideUp").click(function(){
				$("#con").slideUp();
			})
			$("#slidetoggle").click(function(){
				$("#con").slideToggle();
			})												
	</script>
</body>
</html>
© 2018 Peter's Blog Center All Rights Reserved.
Theme by hiero